<template>
  <div id="right-center" style="width: 400px; height: 200px"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
//@ts-ignore
import echarts from "@/hooks/useEcharts";

//@ts-ignore
import { efficiency } from "@/api/dataScreen/index.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  multipleSelection: {
    type: Array,
    default: [],
  },
});

let selection = props.multipleSelection;

//@ts-ignore
let selectionTitle = props.multipleSelection && props.multipleSelection[0].projectName;
 

let totalAmount;

const colors = ["#4aa3ea", "#81b336"];

const echartData = ref([]);
onMounted(() => {
  getData("", 1);
});
const initEchats = async () => {
  var chartDom = document.getElementById("right-center");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: colors,
    tooltip: {
      trigger: "item",
      formatter: (params) => {
        return `${params.name}任务数:\n ${params.value}  \n ${params.name}占比:\n ${params.percent}%`;
      },
    },
    legend: {
      orient: "vertical",
      top: 12,
      right: 0,
    },
    title: {
      text: selectionTitle, //主标题文本
      subtext: `总数：${totalAmount}`, //副标题文本
      left: "31%",
      top: "40%",
      textStyle: {
        fontFamily: "微软雅黑",
        fontSize: 10,
        color: "#454c5c",
        width: 70, // 可以设置文字宽度，超出部分自动换行
        overflow: "break", // 设置换行方式
      },
      subtextStyle: {
        fontFamily: "微软雅黑",
        fontSize: 12,
        color: "#454c5c",
      },
    },

    textStyle: {
      fontSize: 10,
    },
    series: [
      {
        type: "pie",
        radius: ["50", "40%"],
        center: ["40%", "50%"],
        avoidLabelOverlap: false,
        label: {
          formatter: "{b} \n{d}%({c})",
        },
        // label: {
        //   formatter: (params) => {
        //     return `${params.name}任务数:\n ${params.value}  \n ${params.name}占比:\n ${params.percent}%`;
        //   },
        // },
        normal: {
          label: {
            show: true,
            fontSize: 10,
            // fontWeight: "bold",
          },
        },

        labelLine: {
          show: true,
          normal: {
            length: 5, //第一条线
            length2: 30, //第二条线
          },
        },
        data: echartData.value.map((item, index) => {
          item.label = {
            color: colors[index],
          };
          return item;
        }),
      },
    ],
  };
  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

async function getData(date: any, tabCode: number) {
  let params = {};
  if (selection.length) {
    // @ts-ignore
    params["projectName"] = selection[0].projectName;
    // @ts-ignore
    params["businessTypes"] = selection[0].businessTypes;
  }

  const response = await efficiency(params);
  if (response.code === 200) {
    echartData.value = response.data.map((item) => ({
      name: item.projectStatus,
      value: item.num,
    }));
    // 计算总金额
    totalAmount = response.data.reduce(function (acc, item) {
      return acc + item.num;
    }, 0);
  } else {
    ElMessage.error(response.msg);
  }
  initEchats();
}

defineExpose({ getData });
</script>
<style scoped lang="scss">
.left-center {
  width: 100%;
}
</style>
